<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Javascript之浅堆、栈与队列 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Javascript之浅堆、栈与队列</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-06-03 17:14:31</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Javascript/">Javascript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E6%A0%88/">栈</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E5%A0%86/">堆</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E9%98%9F%E5%88%97/">队列</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.6k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.ReefAwareness_ZH-CN8840949729_1920x1200.jpg&rf=LaDigue_1920x1200.jpg" alt="bing.com-大堡礁的航拍图，澳大利亚" title="bing.com-大堡礁的航拍图，澳大利亚"></p>
<p>浅谈Javascript中的堆、栈与队列三种数据结构。</p>
<span id="more"></span>

<p>栈（stack)、堆（heap)、队列（queue)是JavaScript的三种数据结构。</p>
<h1 id="1、堆-heap"><a href="#1、堆-heap" class="headerlink" title="1、堆(heap)"></a>1、堆(heap)</h1><p>堆的存取方式跟顺序没有关系，不局限出入口。堆的特点是<strong>无序</strong>的<strong>key-value键值对 存储方式</strong>。<br><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9245bbe9a1d4fa3bc7d81b1dd15b7b1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" alt="掘金 ： js 中的栈、堆、队列、内存空间" title="掘金 ： js 中的栈、堆、队列、内存空间"></p>
<p>如上图中，书名就是我们的key。拿着这把key，就可以轻松检索到对应的书籍并直接取出。</p>
<h1 id="2、栈-stack"><a href="#2、栈-stack" class="headerlink" title="2、栈(stack)"></a>2、栈(stack)</h1><p>栈是一种特殊的列表，限定<strong>仅在表尾进行插入和删除操作的线性表</strong>。表尾这一端我们称为<strong>栈顶</strong>，相对地，把另一端称为<strong>栈底</strong>。</p>
<p>栈的特点是<strong>后进先出、先进后出</strong>。数据存储时只能从顶部逐个存入，取出时也需从顶部逐个取出。</p>
<p>栈的操作主要有两种：入栈和出栈。</p>
<p>Array数组模拟栈：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr = [1, 2, 3, 4, 5];</span><br><span class="line">arr.push(6);                // 存入数据 arr -&gt; [1, 2, 3, 4, 5, 6]</span><br><span class="line">arr.pop();                  // 取出数据 arr -&gt; [1, 2, 3, 4, 5]</span><br></pre></td></tr></table></figure>

<h1 id="3、队列-quene"><a href="#3、队列-quene" class="headerlink" title="3、队列(quene)"></a>3、队列(quene)</h1><p>队列和栈有点像，它们都是线性表，元素都是有序的。</p>
<p>但是和栈不同的是，队列遵循的是<strong>先进先出（FIFO）</strong>的原则，也就是<strong>从尾部添加元素，从头部移除元素，最新添加的元素必须排列在队列的末尾</strong>。</p>
<p>队列的主要操作有：往队列中插入新的元素和删除最早加入的元素。</p>
<p>与栈的区别：栈的存入取出都在顶部一个出入口，而队列分两个，一个出口，一个入口。</p>
<p>Array数组模拟单链队列：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var arr = [1, 2, 3, 4, 5];</span><br><span class="line"></span><br><span class="line">// 队尾in</span><br><span class="line">arr.push(6);    // 存入 arr -&gt; [1, 2, 3, 4, 5, 6]</span><br><span class="line">// 队头out</span><br><span class="line">arr.shift();    // 取出 arr -&gt; [2, 3, 4, 5, 6]</span><br></pre></td></tr></table></figure>

<h3 id="1-、循环队列"><a href="#1-、循环队列" class="headerlink" title="(1)、循环队列"></a>(1)、循环队列</h3><p>为了解决单链队列在出队操作时的复杂度是O(n)，引入循环队列，将队列的出队操作复杂度降低到O(1)。</p>
<p>循环队列是一种<strong>线性数据结构</strong>，其操作表现基于 FIFO（先进先出）原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。<br>循环队列的一个好处是我们可以利用这个队列之前用过的空间。在一个普通队列里，一旦一个队列满了，我们就不能插入下一个元素，即使在队列前面仍有空间。但是使用循环队列，我们能使用这些空间去存储新的值。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">class SqQueue&#123;</span><br><span class="line">  constructor(length)&#123;</span><br><span class="line">    this.queue = new Array(length + 1)</span><br><span class="line">    this.first = 0</span><br><span class="line">    this.last = 0</span><br><span class="line">    this.size = 0</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  // 判断是否为空</span><br><span class="line">  isEmpty() &#123;</span><br><span class="line">    return this.first === this.last</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  // 扩容</span><br><span class="line">  resize(length) &#123;</span><br><span class="line">    let q = new Array(length)</span><br><span class="line">    for (let i = 0; i &lt; length; i++) &#123;</span><br><span class="line">      q[i] = this.queue[(i + this.first) % this.queue.length]</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue = q</span><br><span class="line">    this.first = 0</span><br><span class="line">    this.last = this.size</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  // 入队</span><br><span class="line">  enQueue(item) &#123;</span><br><span class="line">    // 判断是否需要扩容， 如果需要，扩容的原来的二倍</span><br><span class="line">    if (this.first === (this.last + 1) % this.queue.length) &#123;</span><br><span class="line">      this.resize(this.getLength() * 2 + 1)</span><br><span class="line">    &#125;</span><br><span class="line">    this.queue[this.last] = item</span><br><span class="line">    this.size++</span><br><span class="line">    this.last = (this.last + 1) % this.queue.length</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  // 出队</span><br><span class="line">  deQueue() &#123;</span><br><span class="line">    if (this.isEmpty()) &#123;</span><br><span class="line">      throw Eorror(&#x27;Queue is Empty&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    let r = this.queue[this.first]</span><br><span class="line">    this.queue[this.first] = null</span><br><span class="line">    this.first = (this.first + 1) % this.queue.length</span><br><span class="line">    this.size--</span><br><span class="line">    // 节省空间</span><br><span class="line">    if (this.size === this.getLength() / 4 &amp;&amp; this.getLength() / 2 !== 0) &#123;</span><br><span class="line">      this.resize(this.getLength() / 2)</span><br><span class="line">    &#125;</span><br><span class="line">    return r</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  // 获取队头</span><br><span class="line">  getHeader() &#123;</span><br><span class="line">    if (this.inEmpty()) &#123;</span><br><span class="line">      throw Error(&#x27;Queue is empty&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    return this.queue[this.first]</span><br><span class="line">  &#125;</span><br><span class="line">    </span><br><span class="line">  // 获取队列的长度</span><br><span class="line">  getLength() &#123;</span><br><span class="line">    return this.queue.length - 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://pic1.zhimg.com/80/v2-e976202106c8cf0f0f611ecc6c92c2a4_720w.webp" alt="知乎 ： 用JavaScript手动实现栈和队列" title="知乎 ： 用JavaScript手动实现栈和队列"></p>
<h1 id="4、-总结"><a href="#4、-总结" class="headerlink" title="4、 总结"></a>4、 总结</h1><p>为什么会有栈内存和堆内存之分？</p>
<p>通常与<strong>垃圾回收机制</strong>有关。为了使程序运行时占用的内存最小。</p>
<p>当一个方法执行时，每个方法都会建立自己的<strong>内存栈</strong>，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；</p>
<p>当我们在程序中创建一个对象时，这个对象将被保存到运行时数据区中，以便反复利用（因为对象的创建成本通常较大），这个运行时数据区就是堆内存。<strong>堆内存中的对象不会随方法的结束而销毁</strong>，即使方法结束后，这个对象还可能被另一个引用变量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。</p>
<ul>
<li>JavaScript 中函数的执行过程，其实就是一个入栈出栈的过程:</li>
</ul>
<blockquote>
<p>当脚本要调用一个函数时，JS 解析器把该函数推入栈中（push）并执行<br>当函数运行结束后，JS 解析器将它从堆栈中推出（pop）。</p>
</blockquote>
<ul>
<li>JS 中的基础数据类型，这些值都有固定的大小，往往都保存在栈内存中（闭包除外），由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问 数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构，遵循后进先出的原则。</li>
<li>JS 的引用数据类型，比如数组 Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JS 不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以粗浅地理解为保存在栈内存中的一个地址，该地址与堆内存的实际值相关联。</li>
</ul>
<h1 id="5、堆栈和队列实际使用场景"><a href="#5、堆栈和队列实际使用场景" class="headerlink" title="5、堆栈和队列实际使用场景"></a>5、堆栈和队列实际使用场景</h1><ul>
<li>使用堆栈来组织数据，实现文本编辑器的撤销操作。</li>
<li>使用队列处理数据，实现浏览器的事件循环处理事件。</li>
</ul>
<p><em><strong>参考文献</strong></em></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/289521356" >知乎 ： 用JavaScript手动实现栈和队列<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/347260159" >知乎 ： JavaScript中的数据结构——栈和队列<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7215124001528660028#heading-2" >掘金 ： js 中的栈、堆、队列、内存空间<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7038216569385680910" >稀土掘金 ： 手把手带你实现JS循环队列<i class="fas fa-external-link-alt"></i></a></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/%E6%A0%88/">#栈</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/%E5%A0%86/">#堆</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/%E9%98%9F%E5%88%97/">#队列</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/javascript%E4%B9%8B%E5%BA%8F%E5%88%97%E5%8C%96%E4%B8%8E%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之序列化与反序列化</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Javascript%E4%B9%8B%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E4%B8%8E%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Javascript之匿名函数与箭头函数</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
